<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>学成在线首页</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<div class="header w">
		<div class="logo">
			<img src="./img/logo.png" alt="">
		</div>
		<!-- 为什么不全部用a,因为又堆砌关键词的嫌疑 -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<div class="search">
			<input type="text" value="请输入关键字">
			<button></button>
		</div>
		<div class="info">
			<img src="/img/user.png" alt="">
			<span>xxx</span>
		</div>
	</div>
	<!-- banner部分开始 -->
	<div class="banner">
		<!-- 版心 -->
		<div class="w">
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
					<li><a href="#">前端开发<span>&gt;</span></a></li>
				</ul>
			</div>

			<!-- course 课程表模块 -->
			<div class="course">
				<h2>我的课程表</h2>
				<div class="bd">
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
					</ul>
					<a href="#" class="more">全部课程</a>
				</div>
			</div>
		</div>
	</div>
	<!-- banner 部分结束 -->
	<div class="goods w">
		<!-- 为什么知道用h3吗？1:语义化 2:因为都有个左边框 -->
		<h3>精品推荐</h3>
		<ul>
			<li><a href="#">JQuery</a></li>
			<li><a href="#">Spark</a></li>
			<li><a href="#">Mysql</a></li>
			<li><a href="#">JavaWeb</a></li>
			<li><a href="#">Mysql</a></li>
			<li><a href="#">JavaWeb</a></li>
		</ul>
		<a href="#" class="mod">修改兴趣</a>
	</div>
	<!-- <div style="clear:both;"></div> -->
	<!-- 精品推荐模块结束 -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看更多</a>
		</div>
		<div class="box-bd">
			<ul>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
				<li>
					<img src="./img/pic.png" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<div class="info"><span>高级</span> • 1125人在学习</div>
				</li>
			</ul>
		</div>
		<div style="clear:both;"></div>
	</div>
	<!-- 编程入门模块 -->
	<div class="coding w">
		<div class="coding-header">
			<h3>编程入门</h3>
			<ul>
				<li><a href="#">入门</a></li>
				<li><a href="#">初级</a></li>
				<li><a href="#">中级</a></li>
				<li><a href="#">高级</a></li>
			</ul>
			<span><a href="#">查看更多</a></span>
		</div>
		<div class="coding-body">
			<div class="coding-body-left">
				<img src="./img/php-1.png" alt="">
			</div>
			<div class="coding-body-right">
				<div class="on">
					<img src="./img/python.png" alt="">
				</div>	
				<div class="under">
					<li>
						<img src="./img/UGUI.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info"><span>高级</span> • 1125人在学习</div>
					</li>
					<li>
						<img src="./img/UGUI.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info"><span>高级</span> • 1125人在学习</div>
					</li>
					<li>
						<img src="./img/UGUI.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info"><span>高级</span> • 1125人在学习</div>
					</li>
					<li class="last">
						<img src="./img/UGUI.png" alt="">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info"><span>高级</span> • 1125人在学习</div>
					</li>
				</div>
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<!-- footer -->
	<div class="footer clearfix">
		<div class="w">
			<div class="copyright">
				<img src="./img/logo.png" alt="">
				<p>
					学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
				© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
				</p>
				<a href="#" class="app">下载APP</a>
			</div>
			<div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
		</div>
	</div>
</body>

</html>